

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/login.css" media="all">
  <link rel="stylesheet" href="../../public/res/css/g.css" media="all">
</head>
<body>

<div class="layui-fluid">
<div class="progress box1">
<h2>速度调节</h2>
<div class="barbox">
	<button class="layui-btn layui-btn-warm layui-btn-radius  layui-btn-xs layui-icon fl">&#xe603;</button>
	<button class="layui-btn layui-btn-danger layui-btn-radius layui-btn-xs layui-icon fr">&#xe602;</button>
	<div class="layui-progress layui-progress-big fc" lay-showpercent="true">
	  <div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>  
	</div>
</div>
</div>

<div class="progress box2">
<h2>清晰度调节</h2>
<div class="barbox">
	<button class="layui-btn layui-btn-warm layui-btn-radius  layui-btn-xs layui-icon fl">&#xe603;</button>
	<button class="layui-btn layui-btn-danger layui-btn-radius layui-btn-xs layui-icon fr">&#xe602;</button>
	<div class="layui-progress layui-progress-big fc" lay-showpercent="true">
	  <div class="layui-progress-bar layui-bg-cyan" lay-percent="50%"></div>  
	</div>
</div>
</div>

</div>

  
  <script src="../../layuiadmin/layui/layui.js"></script>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
    
      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>
</body>
</html>